<%--
  Created by IntelliJ IDEA.
  User: 箜絔lk
  Date: 2020/9/22
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="container" style="text-align: center">
    <ul class="pagination">
        <li><a href="javascript:next_page(1)">首页</a></li>

        <c:if test="${page.pageNum<=1}">
            <li class="disabled"><a href="#">&laquo;</a></li>
        </c:if>

        <c:if test="${page.pageNum>1}">
            <li><a href="javascript:next_page(${page.pageNum-1})">&laquo;</a></li>
        </c:if>

        <c:if test="${page.pageNum+2<=page.pages}">
            <c:set var="endPage" value="${page.pageNum+2}"></c:set>
            <c:set var="startPage" value="${page.pageNum}"></c:set>
        </c:if>

        <c:if test="${page.pageNum+2>page.pages}">
            <c:set var="endPage" value="${page.pages}"></c:set>
            <c:set var="startPage" value="${page.pages-2}"></c:set>
        </c:if>

        <c:forEach begin="${startPage}" end="${endPage}" var="v">
            <li <c:if test="${page.pageNum == v}">class="active"</c:if></li> <a href="javascript:next_page(${v})">${v}</a></li>
        </c:forEach>


        <c:if test="${page.pageNum<page.pages}">
            <li><a href="javascript:next_page(${page.pageNum+1})">&raquo;</a></li>
        </c:if>

        <c:if test="${page.pageNum>=page.pages}">
            <li class="disabled"><a href="#">&raquo;</a></li>
        </c:if>


        <li><a href="javascript:next_page(${page.pages})">尾页</a></li>
        <li><a href="#">当前页${page.pageNum}/${page.pages}总页</a></li>
        <li><a style="padding: 0;border: none;margin-left: 2px"><input placeholder="跳转页" class="form-control">

        </a></li>
        <li><a style="padding: 0;border: none"><button type="button" class="btn btn-info">Go</button></a></li>
        <li><a style="padding: 0;border: none;margin-left: 2px">
            <select id="pageSizeSelect" onchange="page_size(this)" style="width: 180px" class="form-control">
                <option value="-1">===每页显示条数====</option>
                <c:forEach begin="2" end="5" var="num">
                    <option <c:if test="${num == page.pageSize}">selected</c:if> value="${num}">${num}</option>
                </c:forEach>
            </select></a></li>
    </ul>
</div>
<script>
    const url = "${path}/pet/indexData";

    function next_page(page){
        let type = $("#petTypeSelect").val();
        let search = $("#search_input").val();
        let size = $("#pageSizeSelect").val();
        //window.location="${path}/pet/indexData?type_id="+type+"&name="+search+"&pageNow="+page+"&pageSize="+size;
        $("#outer").load("${path}/pet/indexData",{type_id:type,name:search,pageNow:page,pageSize:size})
    }

    function page_size(obj){
        let type = $("#petTypeSelect").val();
        let search = $("#search_input").val();
        $("#outer").load("${path}/pet/indexData",{type_id:type,name:search,pageNow:1,pageSize:obj.value});
        // window.location=url+"?type_id="+type+"&name="+search+"&pageNow=1&pageSize="+obj.value;

    }
</script>
